<template>
  <div id="detail_nav">
    <Nav>
      <template #left>
        <div class="detail_images" @click="detail_back">
          <img src="@/assets/img/back.svg" alt="" />
        </div>
      </template>
      <template #middle>
        <div class="nav_middle">
          <div
            class="nav_item"
            v-for="(item, index) in title"
            :key="index"
            @click="detail_click(index)"
            :class="index == current_index ? 'active' : ''"
          >
            {{ item }}
          </div>
        </div>
      </template>
    </Nav>
  </div>
</template>

<script>
//导入顶部导航栏
import Nav from "@/components/header/Nav.vue"

export default {
  name: "Detail_nav",
  components: {
    Nav,
  },
  data() {
    return {
      title: ["商品", "参数", "评价", "推荐"],
      //设置当前的index
      current_index: 0,
    }
  },
  methods: {
    //返回上一层
    detail_back() {
      this.$router.go(-1)
    },

    //点击添加当前的颜色
    detail_click(index) {
      this.current_index = index

      this.$emit("current_position", index)
    },
  },
}
</script>

<style lang="less" scoped>
.nav_middle {
  display: flex;
  .nav_item {
    flex: 1;
    color: #666666;
    font-size: 12px;
  }
}

#nav-component {
  background-color: #fff;
}

.detail_images {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.active {
  color: #ff5777 !important;
}
</style>
